<template>
  <div>
    <div class="main">
      <el-row class="toolBar">
        <span class="tag" style="margin-top: 3px">学工号：</span>
        <el-input
          v-model="sno"
          style="float: left; margin-right: 10px"
          class="filter-item"
          size="small"
          clearable
          placeholder="输入学工号查询"
        />

        <el-button-group>
          <el-button
            type="primary"
            style=""
            icon="el-icon-search"
            size="small"
            @click="getAll"
            @keyup.enter="getAll"
            >搜索</el-button
          >
        </el-button-group>
      </el-row>
      <el-divider></el-divider>
      <div class="container">
        <el-table :data="allData" style="width: 100%">
          <el-table-column prop="createTime" label="上传日期" width="">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width=""> </el-table-column>
          <el-table-column prop="sno" label="学工号"> </el-table-column>
          <el-table-column label="照片">
            <template slot-scope="scope">
              <el-popover placement="top-start" width="100%" trigger="hover">
                <img :src="urlApi + scope.row.uri" class="big_head_pic" />
                <img
                  :src="urlApi + scope.row.uri"
                  slot="reference"
                  class="head_pic"
                />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column prop="ownerSno" label="操作员"> </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini"  type="primary" plain @click="downs(scope.row)"
                >下载照片</el-button
              >
              <el-button
                size="mini"
                type="danger"
                plain
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { getDataList, delPic } from "@/api/apis";
export default {
  name: "index",
  data() {
    return {
      loading: false,
      sno: "",
      pageSize: 12,
      pageNo: 1,
      total: 0,
      allData: [],
      urlApi: "http://10.192.24.159:84",
    };
  },

  created() {
    this.getAll();
    this.enterSearch();
  },
  methods: {
    handleDelete(row) {
      this.$confirm("确认删除吗？")
        .then((_) => {
          return delPic(row.id, row.uri).then((res) => {
            if (res.code == 20000) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.getAll();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((_) => {});
    },
    // 改downs这个函数就行，downloadIamge（‘图片下载地址’，图片名字）
    downs(item) {
      let imgurl = this.urlApi + item.uri;
      let picName = item.sno;
      this.imgDownload(imgurl, picName);
    },
    imgDownload(url, name) {
      //创建一个a标签
      const a_b = document.createElement("a");
      //设置href指向
      a_b.href = url;
      //设置图片下载名字
      a_b.download = name;
      //点击a标签
      a_b.click();
    },

    //获取列表
    getAll() {
      getDataList(this.sno, this.pageSize, this.pageNo).then((res) => {
        console.log("all", res.data);
        this.allData = res.data.records;
        this.total = res.data.total;
      });
    },
    //回车键搜索
    enterSearch() {
      document.onkeydown = (e) => {
        // console.log("url", e.target.baseURI.match());
        //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
        if (e.keyCode === 13) {
          //回车后执行搜索方法
          this.getAll();
        }
      };
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageNo = val;
      this.getAll();
    },
  },
};
</script>
<style lang="less" scoped>
.head_pic {
  height: 50px;
}
.big_head_pic {
  height: 300px;
}
/deep/ .el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}

/deep/ .el-input,
.el-input__inner {
  width: 200px;
}

.toolBar {
  display: flex;
  justify-items: start;
  margin: 20px 0;
}
.main {
  width: 1200px;
  height: 100%;
  overflow-y: auto;
  padding: 0 0 50px 0;
  margin: 0 auto;
}
.container {
  width: 100%;
  height: 80vh;

  .imgContainer {
    float: left;
    width: 264px;
    padding: 10px;
    img {
      width: 100%;
    }
  }
}
</style>
